<!DOCTYPE html>
<html lang="ch">
    <head>
        <title>Font Awesome 图标预览</title>
        <!-- 加载本地 Font Awesome CSS 文件 -->
        <link rel="stylesheet" href="./css/fontawesome.css" id="fa-css">
        <style>
            @font-face {
                font-family: 'Font Awesome 6 Brands';
                font-style: normal;
                font-weight: 400;
                font-display: block;
                src:
                    url('./webfonts/fa-brands-400.woff2') format('woff2'),
                    url('./webfonts/fa-brands-400.woff') format('woff'),
                    url('./webfonts/fa-brands-400.ttf') format('truetype');
            }

            @font-face {
                font-family: 'Font Awesome 6 Free';
                font-style: normal;
                font-weight: 900;
                font-display: block;
                src:
                    url('./webfonts/fa-solid-900.woff2') format('woff2'),
                    url('./webfonts/fa-solid-900.woff') format('woff'),
                    url('./webfonts/fa-solid-900.ttf') format('truetype');
            }

            @font-face {
                font-family: 'Font Awesome 6 Free';
                font-style: normal;
                font-weight: 400;
                font-display: block;
                src:
                    url('./webfonts/fa-regular-400.woff2') format('woff2'),
                    url('./webfonts/fa-regular-400.woff') format('woff'),
                    url('./webfonts/fa-regular-400.ttf') format('truetype');
            }

            .fas { font-family: 'Font Awesome 6 Brands', 'Font Awesome 6 Free'; }

            #icons-container {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 15px;
                padding: 20px;
            }

            .icon-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10px;
                border: 1px solid #eee;
                border-radius: 4px;
                transition: all 0.3s;
            }

            .icon-card:hover {
                background: #f5f5f5;
                transform: scale(1.05);
            }

            .icon-preview {
                font-size: 24px;
                margin-bottom: 8px;
            }

            .icon-name {
                font-family: monospace;
                font-size: 12px;
                text-align: center;
                word-break: break-all;
            }

            .search-box {
                width: 100%;
                padding: 10px;
                font-size: 16px;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <label for="search">
            <input type="text" id="search" class="search-box" placeholder="搜索图标...">
        </label>
        <div id="icons-container">

        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const faStylesheet = document.getElementById('fa-css');
                const iconsContainer = document.getElementById('icons-container');
                const searchInput = document.getElementById('search');

                // 存储所有图标
                let allIcons = [];

                // 从CSS规则提取图标类名
                function extractIcons() {
                    const icons = [];
                    const sheets = document.styleSheets;

                    for (let i = 0; i < sheets.length; i++) {
                        const sheet = sheets[i];
                        // 确保是FontAwesome的样式表
                        if (sheet.href && sheet.href.includes('fontawesome')) {
                            try {
                                const rules = sheet.cssRules || sheet.rules;
                                for (let j = 0; j < rules.length; j++) {
                                    const rule = rules[j];
                                    if (rule.selectorText &&
                                        rule.selectorText.includes('.fa-') &&
                                        rule.selectorText.includes(':before')) {
                                        const iconClass = rule.selectorText
                                            .split(':before')[0]
                                            .trim()
                                            .replace(/^\./, '').replace(':', '');
                                        icons.push(iconClass);
                                    }
                                }
                            } catch (e) {
                                console.log('无法读取跨域样式表规则:', e);
                            }
                        }
                    }

                    return [...new Set(icons)]; // 去重
                }

                // 渲染图标到页面
                function renderIcons(icons) {
                    iconsContainer.innerHTML = '';
                    icons.forEach(icon => {
                        const card = document.createElement('div');
                        card.className = 'icon-card';
                        card.innerHTML = `
                    <div class="icon-preview">
                        <i class="fas ${icon}"></i>
                    </div>
                    <div class="icon-name">${icon}</div>
                    `;
                        iconsContainer.appendChild(card);
                    });
                }

                // 初始化
                allIcons = extractIcons();
                renderIcons(allIcons);

                // 搜索功能
                searchInput.addEventListener('input', function () {
                    const searchTerm = this.value.toLowerCase();
                    const filteredIcons = allIcons.filter(icon =>
                        icon.toLowerCase().includes(searchTerm)
                    );
                    renderIcons(filteredIcons);
                });
            });
        </script>
    </body>
</html>